<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue3.js"></script>
</head>
<body>
  <div id="dialogLL"></div>
  <div id="hello-vue">
    <div>
      <p>计数：{{ num }}s</p>
      <p>主人年龄：{{ person.age }}</p>
      <p>主人姓名：{{ person.name }}</p>
      <p>动物类别：{{ atype }}</p>
      <p>动物名称：{{ aname }}</p>
      <p>动物年龄：{{ aage }}</p>
      <p>count: {{ age }}</p>
      <p>倍数： {{ doubleAge }}</p>
      <div>
        <button @click="increase()">加1</button>
        <button @click="decrease()">减一</button>
      </div>
      <button type="text" @click="dialogVisible = true"
        >点击打开 Dialog</button
      >
      <teleport to="#dialogLL">
        <input type="text" v-model="dialogVisible">
        <div title="提示" width="30%">
          <span>这是一段信息</span>
          <template #footer>
            <span class="dialog-footer">
              <button @click="dialogVisible = false">取 消</button>
              <button type="primary" @click="dialogVisible = false"
                >确 定</button
              >
            </span>
          </template>
        </div>
      </teleport>
    </div>
  </div>
  <script>
  let {defineComponent,reactive,ref,toRefs} = Vue;
 console.log("=========",defineComponent)
 const HelloVueApp = defineComponent({
    setup() {
      //使用ref声明基本类型
      const num = ref(0);
      const dialogVisible = ref(false);
      //使用ref声明对象
      const person = ref({ age: 20, name: "张三" });
      //使用reactive声明对象
      const animal = reactive({ atype: "猫", aname: "小花", aage: 5 });
      setTimeout(() => {
        person.value.age = person.value.age + 1;
        person.value.name = "李四";
        animal.aage++;
        animal.aname = "小橘";
      }, 1000);
      setInterval(() => {
        num.value++;
      }, 1000);
  
      return {
        dialogVisible,
        num,
        person,
        ...toRefs(animal),
      };
    },
  }); 
  Vue.createApp(HelloVueApp).mount('#hello-vue')
  </script>
  
</body>
</html>